<template>
  <div v-loading="loading" class="system-detail">
    <div class="top_con">
      <div class="top_con_query">
        <div class="top_query">
          <px-form ref="queryRef" class="custom-form-ui inspection-form" :model="queryParams" :inline="true" label-width="100px">
            <px-form-item label="时间维度" prop="dataFormat" style="width: auto; padding-right: 10px">
              <px-radio-group v-model="queryParams.queryTimeGranularity" style="margin-left: 10px" @change="handleChangeFn">
                <!-- <px-radio size="small" label="Hourly">小时</px-radio> -->
                <!-- <px-radio size="small" label="Daily">日</px-radio> -->
                <px-radio size="small" label="Monthly">月</px-radio>
                <px-radio size="small" label="Yearly">年</px-radio>
              </px-radio-group>
            </px-form-item>
            <px-form-item label="时间范围" style="width: 430px">
              <px-date-picker
                v-if="queryParams.queryTimeGranularity === 'Hourly'"
                v-model="dateRange"
                type="datetimerange"
                range-separator="-"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
              />
              <px-date-picker
                v-if="queryParams.queryTimeGranularity === 'Daily'"
                v-model="dateRange"
                value-format="YYYY-MM-DD"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
              <px-date-picker
                v-if="queryParams.queryTimeGranularity === 'Monthly'"
                v-model="dateRange"
                type="monthrange"
                value-format="YYYY-MM"
                range-separator="-"
                start-placeholder="开始月份"
                end-placeholder="结束月份"
              />
              <div v-if="queryParams.queryTimeGranularity === 'Yearly'">
                <yearPicker ref="statisticPicker" :labelWidth="0" labelText="" :initYear="dateValue" @updateTimeRange="updateStatisticYear" />
              </div>
            </px-form-item>
            <px-button type="primary" icon="" @click="handleQuery">搜索</px-button>
            <px-button icon="" @click="resetQuery">重置</px-button>
          </px-form>
        </div>
      </div>
    </div>
    <systemTableLine ref="switchTabsContentRef" :queryParams="queryData" />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, computed, markRaw, getCurrentInstance } from "vue";
import yearPicker from "@/views/common/energy/components/yearPicker.vue";
import { PxMessage } from "px-ui";
import { useUpdateDomHeight, useCancelUpdateDomHeight } from "@/hooks/useCommon";
import systemTableLine from "./systemTableLine.vue";
import dayjs from "dayjs";

const { proxy }: any = getCurrentInstance();

interface Props {
  params?: any;
}

const props = withDefaults(defineProps<Props>(), {});

interface queryForm {
  queryTimeGranularity?: string;
  startTime?: string;
  endTime?: string;
  sysId?: string;
}
const loading = ref(false);

const queryData = ref<any>({});

const defaultHeight = ref<number>(700);

const params = computed(() => props.params);

const switchTabsContentRef = ref(null);

const switchTabsChangeHandler = async () => await useUpdateDomHeight(defaultHeight, switchTabsContentRef, null, defaultHeight.value);

const queryParams = ref<queryForm>({
  queryTimeGranularity: "Monthly",
  sysId: ""
});

const dateRange = ref<any>([]);

const yearStart = ref("");
const yearEnd = ref("");
// 可选择区间，initYear传参，不传则所有年份有效，小于0判断一下？
const dateValue = ref<any>({ startYear: new Date().getFullYear() - 2, endYear: new Date().getFullYear() });
// 选完/输入完成的回调
const updateStatisticYear: any = (startYear: number, endYear: number) => {
  console.log("选中年份", startYear, endYear);
  dateRange.value = [startYear ? startYear.toString() : "", endYear ? endYear.toString() : ""];
  yearStart.value = `${startYear}-01-01 00:00:00` || null;
  yearEnd.value = `${endYear}-12-31 23:59:59` || null;
};

// 获取当月第一天
const getCurrentMonthF = () => {
  let date = new Date();
  let y = date.getFullYear(); // 获取年
  let m: any = date.getMonth() + 1; // 获取月
  let d = "01";
  m = m < 10 ? "0" + m : m;
  return [y, m, d].join("-");
};

// 获取当月最后一天
const getCurrentMonthL = () => {
  let date = new Date();
  let y = date.getFullYear(); // 获取年
  let m: any = date.getMonth() + 1; // 获取月
  let d: any = new Date(y, m, 0).getDate();
  m = m < 10 ? "0" + m : m;
  d = d < 10 ? "0" + d : d;
  return [y, m, d].join("-");
};

const handleChangeFn = (val: string) => {
  //获取新的时间
  let date = new Date();
  //获取当前时间的年份转为字符串
  let year = date.getFullYear().toString();
  //获取月份，由于月份从0开始，此处要加1，判断是否小于10，如果是在字符串前面拼接'0'
  let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1).toString() : (date.getMonth() + 1).toString();
  //获取天，判断是否小于10，如果是在字符串前面拼接'0'
  let da = date.getDate() < 10 ? "0" + date.getDate().toString() : date.getDate().toString();
  let y = date.getFullYear(); // 获取年
  let m: any = date.getMonth() + 1; // 获取月
  switch (val) {
    case "Hourly":
      dateRange.value = [`${year}-${month}-${da} 00:00:00`, `${year}-${month}-${da} 23:59:59`];
      break;
    case "Daily":
      dateRange.value = [getCurrentMonthF(), getCurrentMonthL()];
      break;
    case "Monthly":
      dateRange.value = [`${year}-${month}`, `${year}-${month}`];
      break;
    case "Yearly":
      let yearS = new Date().getFullYear() - 2;
      let yearE = new Date().getFullYear();
      yearStart.value = `${yearS}-01-01 00:00:00`;
      yearEnd.value = `${yearE}-12-31 23:59:59`;
      break;
    default:
      break;
  }
};

// 校验时间范围不为空
const checkDate = () => {
  if (queryParams.value.queryTimeGranularity) {
    if (dateRange.value && dateRange.value.length) {
      return true;
    }
    if (queryParams.value.startTime && queryParams.value.endTime) {
      return true;
    }
  }
};

// 获取某月最后一天
const getMonthLastDay = (y, m) => {
  let date = new Date(y, m - 1, "01");
  date.setDate(1);
  date.setMonth(date.getMonth() + 1);
  let cdate = new Date(date.getTime() - 1000 * 60 * 60 * 24);
  return cdate.getDate();
};

/** 搜索按钮操作 */
function handleQuery() {
  if (queryParams.value.queryTimeGranularity === "Daily") {
    queryParams.value.startTime = dateRange.value[0] + " 00:00:00";
    queryParams.value.endTime = dateRange.value[1] + " 23:59:59";
  } else if (queryParams.value.queryTimeGranularity === "Monthly") {
    queryParams.value.startTime = dateRange.value[0].indexOf("00") != -1 ? dateRange.value[0] : dateRange.value[0] + "-01 00:00:00";
    const d = getMonthLastDay(Number(dateRange.value[1].split("-")[0]), Number(dateRange.value[1].split("-")[1]));
    queryParams.value.endTime = dateRange.value[1].indexOf("59") != -1 ? dateRange.value[1] : dateRange.value[1] + "-" + d + " 23:59:59";
  } else if (queryParams.value.queryTimeGranularity === "Hourly") {
    //获取新的时间
    let date = new Date();
    //获取当前时间的年份转为字符串
    let year = date.getFullYear().toString();
    //获取月份，由于月份从0开始，此处要加1，判断是否小于10，如果是在字符串前面拼接'0'
    let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1).toString() : (date.getMonth() + 1).toString();
    //获取天，判断是否小于10，如果是在字符串前面拼接'0'
    let da = date.getDate() < 10 ? "0" + date.getDate().toString() : date.getDate().toString();
    queryParams.value.startTime = dateRange.value[0];
    queryParams.value.endTime = dateRange.value[1];
  } else {
    queryParams.value.startTime = yearStart.value;
    queryParams.value.endTime = yearEnd.value;
  }
  console.log(queryParams.value.startTime, queryParams.value.endTime);
  proxy.$refs["queryRef"].validate(valid => {
    if (!valid) return;
    if (queryParams.value.queryTimeGranularity) {
      if (!checkDate()) {
        return PxMessage({
          type: "warning",
          message: "时间范围不能为空"
        });
      }
    }
  });
  const param = {
    startDate: queryParams.value.startTime,
    endDate: queryParams.value.endTime,
    sysId: params.value.id,
    dimension: queryParams.value.queryTimeGranularity
  };
  queryData.value = Object.assign({}, param);
}

const initQuery = () => {
  queryParams.value.queryTimeGranularity = "Monthly";
  dateRange.value = [dayjs().subtract(12, "month").format("YYYY-MM"), dayjs().subtract(1, "month").format("YYYY-MM")];
  queryParams.value.startTime = dayjs().subtract(12, "month").format("YYYY-MM") + "-01 00:00:00";
  queryParams.value.endTime = dayjs().subtract(1, "month").endOf("month").format("YYYY-MM-DD") + " 23:59:59";

  const param = {
    startDate: queryParams.value.startTime,
    endDate: queryParams.value.endTime,
    sysId: params.value.id,
    dimension: queryParams.value.queryTimeGranularity
  };
  queryData.value = Object.assign({}, param);
};

/** 重置按钮操作 */
function resetQuery() {
  initQuery();
}

onMounted(async () => {
  await switchTabsChangeHandler();
  initQuery();
});

onUnmounted(() => useCancelUpdateDomHeight());
</script>

<style lang="scss" scoped>
.system-detail {
  box-sizing: border-box;
  display: flex;
  flex: 1;
  flex-direction: column;

  .top_con {
    min-width: 1300px;
    padding: 16px 24px;
    margin-bottom: 16px;
    background: #fff;
    border-radius: 4px;

    .top_con_query {
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      margin-bottom: 16px;

      .top_query {
        display: flex;
        flex-flow: row nowrap;
      }
    }

    .px-form-item {
      margin-bottom: 0;
    }

    .tabs {
      display: flex;
      justify-content: center;

      /*
      * tab样式
      */
      .tabSwitch {
        padding: 4px;
        background-color: #f4f4f4;
        border-radius: 4px;

        :deep(.px-radio-button__inner) {
          background-color: #f4f4f4;
          border: none;
        }

        :deep(.is-active) {
          border: none;

          .px-radio-button__inner {
            background-color: var(--px-color-primary);
            border-radius: 4px;
          }
        }
      }
    }
  }

  .px-scrollbar {
    .fab-tabs-fade-enter-active,
    .fab-tabs-fade-leave-active {
      transition: all 0.4s ease;
    }

    .fab-tabs-fade-enter-from {
      opacity: 0;
      transform: translateX(-80px);
    }

    .fab-tabs-fade-leave-to {
      opacity: 0;
      transform: translateX(80px);
    }
  }

  .componnet_com {
    min-width: 1300px;
    background-color: #f0f2f5;
  }
}
</style>
